<template>
  <div class="footer-container">
    <audio
      ref="player"
      :src="songNum != 0 ? songList[current].url : ''"></audio>

    <!-- 进度条 -->
    <el-slider
      v-model="playProcess"
      @input="changeProcess()"
      :show-tooltip="false"
      class="music-process" />
    <div class="run_way"></div>
    <!-- 左边边歌曲展示部分 -->
    <div class="left">
      <div
        class="music-image"
        @click="toSongDetail">
        <img :src="songNum != 0 ? songList[current].songImage : image" />
        <span class="iconfont go">&#xe775;</span>
        <span class="iconfont go">&#xe775;</span>
      </div>
      <div class="music-info">
        <!-- 提供默认占位参数 -->
        <p>
          {{ songNum != 0 ? songList[current].name : '开源网易云音乐' }} -
          <span>{{
            handleSingerName(songNum != 0 ? songList[current].singer : '潇潇')
          }}</span>
        </p>
        <div class="operation">
          <span class="iconfont">&#xe761;</span>
          <span class="iconfont">&#xe61a;</span>
          <span class="iconfont">&#xe605;</span>
          <span class="iconfont">&#xe60b;</span>
        </div>
      </div>
    </div>
    <!-- 中间播放模式设置 -->
    <div class="middle">
      <!-- 播放模式的选择 -->
      <el-dropdown
        @command="changeMode"
        trigger="click"
        placement="top"
        class="play-mode-menu">
        <!-- 播放模式的选择 -->
        <div class="play-mode">
          <span
            v-show="playMode == '0'"
            class="iconfont"
            >&#xe604;</span
          >
          <span
            v-show="playMode == '1'"
            class="iconfont"
            >&#xe603;</span
          >
          <span
            v-show="playMode == '2'"
            class="iconfont"
            >&#xe871;</span
          >
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              command="0"
              style="font-size: 12px"
              >单曲循环
              <span
                class="iconfont"
                style="font-size: 16px; margin-left: 5px"
                >&#xe604;</span
              ></el-dropdown-item
            >
            <el-dropdown-item
              command="1"
              style="font-size: 12px">
              随机播放
              <span
                class="iconfont"
                style="font-size: 15px; margin-left: 5px"
                >&#xe603;</span
              ></el-dropdown-item
            >
            <el-dropdown-item
              command="2"
              style="font-size: 12px"
              >顺序播放<span
                class="iconfont"
                style="font-size: 15px; margin-left: 5px"
                >&#xe871;</span
              ></el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <!-- 播放前进后退 -->
      <span
        @mousedown.prevent="pre"
        class="iconfont pre"
        >&#xe63c;</span
      >
      <span
        v-show="isPlay"
        @mousedown.prevent="isPlay = false"
        class="iconfont stop"
        >&#xea81;
      </span>
      <span
        v-show="!isPlay"
        @mousedown.prevent="isPlay = true"
        class="iconfont continue"
        >&#xea83;</span
      >
      <span
        @mousedown.prevent="next"
        class="iconfont next"
        >&#xe63e;</span
      >
      <!-- 音量 -->
      <el-popover
        placement="top"
        trigger="click"
        :width="60"
        class="volume-popover">
        <template #reference>
          <div>
            <span
              class="iconfont volume"
              v-show="!isMuted"
              >&#xe60d;</span
            >
            <span
              class="iconfont volume"
              v-show="isMuted"
              >&#xf1f4;</span
            >
          </div>
        </template>
        <div class="volume-setting-container">
          <el-slider
            v-model="volume"
            @change="setVolume"
            vertical
            height="130px"
            class="volume-setting" />
          <span>{{ volume }}%</span>
          <el-divider />
          <!-- 非静音 -->
          <span
            v-show="!isMuted"
            @mousedown.prevent="setMuted"
            class="iconfont volume"
            >&#xe60d;</span
          >
          <!-- 静音 -->
          <span
            v-show="isMuted"
            @mousedown.prevent="setMuted"
            class="iconfont volume"
            >&#xf1f4;</span
          >
        </div>
      </el-popover>
    </div>

    <!-- 右边播放设置 -->
    <div class="right">
      <!-- 提供默认占位参数 -->
      <span v-prevent
        >{{ transformTime(playTime * 1000 + '') }} /
        {{
          transformTime(songNum != 0 ? (songList[current].time as string) : '0')
        }}</span
      >
      <span
        @click="showList = true"
        class="iconfont"
        >&#xe86a;</span
      >
      <span>
        {{ songNum }}
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import useFooterStore from '../store/footer';
import { storeToRefs } from 'pinia';
import {
  transformTime,
  elMessage,
  setStorAge,
  transformTotalTime,
  getTheme,
  handleSingerName,
} from '../utils/util';
import { useRouter } from 'vue-router';
import { storageType, elMessageType } from '../model/enum';
import image from '../assets/image/歌曲占位.jpg';
import _ from 'lodash';

const router = useRouter();

//设置主题
const color = getTheme().get('fontColor');
const boxShadow = getTheme().get('shadow');
const bg = getTheme().get('background');

const toSongDetail = () => {
  if (isPlay.value) {
    isPlay.value = false;
  }
  playProcess.value = 0;
  playTime.value = 0;
  router.push({
    name: 'lyrics',
  });
};

const footer = useFooterStore();
const {
  isPlay,
  songList,
  current,
  playMode,
  songNum,
  playProcess,
  playTime,
  showList,
  isChanging,
} = storeToRefs(footer);
//播放容器
const player = ref<HTMLAudioElement>();
//当前音量
const volume = ref<number>(80);
//判断当前是否静音
const isMuted = ref<boolean>(false);
//计时器
let timeId: number;

//切换播放模式
const changeMode = (command: string) => {
  playMode.value = command;
};

//设置音量
const setVolume = () => {
  //设置音量
  player.value!.volume = volume.value / 100;
  isMuted.value = volume.value == 0 || player.value!.muted;
};
// 改变进度;
const changeProcess = _.throttle(
  () => {
    player.value!.currentTime =
      (playProcess.value *
        transformTotalTime(songList.value[current.value].time as string)) /
      100;
    isChanging.value = true;
  },
  100,
  {
    leading: true,
    trailing: false,
  }
);

//设置静音
const setMuted = () => {
  player.value!.muted = !player.value!.muted;
  isMuted.value = volume.value == 0 || player.value!.muted;
};

//下一首
const next = () => {
  if (songNum.value > 0) {
    current.value = ++current.value >= songNum.value ? 0 : current.value;
  } else {
    elMessage(elMessageType.INFO, '暂无音乐，请您添加音乐');
  }
};
//上一首
const pre = () => {
  //切换歌曲
  if (songNum.value > 0) {
    current.value = --current.value < 0 ? songNum.value - 1 : current.value;
  } else {
    elMessage(elMessageType.INFO, '暂无音乐，请您添加音乐');
  }
};

//监测current的变化实现歌曲的切换
watch(current, async () => {
  if (isPlay.value) {
    isPlay.value = false;
  }
  //清空进度条
  playProcess.value = 0;
  //清空播放时间
  playTime.value = 0;
  await nextTick();
  isPlay.value = true;
});

//监测isPlay实现播放
watch(isPlay, async (newVal) => {
  if (newVal) {
    //无音乐则不播放
    if (songNum.value > 0) {
      //判断是否具有版权
      player.value?.play();
      timeId = setInterval(() => {
        //转化时间
        playTime.value = player.value!.currentTime;
        //计算总进度
        playProcess.value =
          (playTime.value /
            transformTotalTime(songList.value[current.value].time as string)) *
          100;
      }, 1000);
    } else {
      elMessage(elMessageType.INFO, '暂无音乐，请您添加音乐');
      isPlay.value = false;
    }
  } else {
    if (!player.value?.paused) {
      clearInterval(timeId);
      player.value?.pause();
    }
  }
});

// 监测播放列表的变化以更新本地缓存
watch(
  () => songList.value,
  (newVal) => {
    setStorAge(storageType.LOCAL, 'userPlaylist', newVal);
  },
  {
    deep: true,
  }
);

onMounted(() => {
  player.value?.addEventListener('ended', async () => {
    if (playMode.value == '1') {
      const temp = current.value;
      current.value = Math.floor(Math.random() * songNum.value);
      if (temp == current.value) {
        isPlay.value = false;
        //清空进度条
        playProcess.value = 0;
        //清空播放时间
        playTime.value = 0;
        await nextTick();
        isPlay.value = true;
      }
    } else if (playMode.value == '2') {
      current.value = ++current.value >= songNum.value ? 0 : current.value;
    } else {
      isPlay.value = false;
      //清空进度条
      playProcess.value = 0;
      //清空播放时间
      playTime.value = 0;
      await nextTick();
      isPlay.value = true;
    }
  });
});
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@shadow: v-bind(boxShadow);
@background: v-bind(bg);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;

.footer-container {
  display: flex;
  height: 10vh;
  position: relative;
  align-items: center;

  .run_way {
    width: 2%;
    height: 3px;
    background-color: rgb(217, 217, 217);
    position: absolute;
    bottom: 9.8vh;
    right: 2px;
    z-index: 100;
  }

  .left,
  .middle,
  .right {
    flex: 1;
    padding-top: 4px;
    height: 10vh;
  }
  .music-process {
    z-index: 100;
    position: absolute;
    top: -16px;
    width: 98%;

    &:deep(.el-slider__button) {
      height: 12px;
      width: 12px;
      border: none;
      background-color: @font-color-green;
      display: none;
    }
    &:deep(.el-slider__bar) {
      height: 3px;
      background-color: @font-color-green;
    }
    &:deep(.el-slider__runway) {
      height: 3px;
      background-color: rgb(217, 217, 217);
    }
  }

  .left {
    display: flex;
    align-items: center;
    padding: 4px 0 0 50px;
    .music-image {
      width: 50px;
      height: 50px;
      position: relative;

      &::after {
        content: '';
        height: 50px;
        width: 50px;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 2;
        position: absolute;
        top: 0;
        border-radius: 10px;
        opacity: 0;
        transition: 0.4s;
      }
      &:hover:after {
        opacity: 1;
      }

      &:hover .go {
        opacity: 1;
      }

      .go {
        z-index: 3;
        display: inline-block;
        position: absolute;
        opacity: 0;
        top: 10px;
        font-size: 18px;
        color: rgba(240, 240, 240, 0.7);
        transform: rotate(-90deg);
        left: 16.5px;
        transition: 0.4s;
        &:last-child {
          top: 20px;
        }
      }

      img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: @shadow;
        cursor: pointer;
      }
    }
    .music-info {
      display: flex;
      flex-direction: column;
      height: 50px;
      margin-left: 12px;
      p {
        color: @font-color;
        font-size: 12px;
        margin: 4px 0 3px 0;
        width: 380px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        letter-spacing: 1px;
        span {
          color: @font-color-gray;
        }
      }
      .operation {
        .iconfont {
          font-size: 17px;
          margin-right: 10px;
          color: @font-color;
          &:hover {
            color: @font-color-green;
          }
        }
      }
    }
  }
  .middle {
    display: flex;
    align-items: center;
    justify-content: center;

    .play-mode-menu {
      &:deep(.el-dropdown-menu__item) {
        font-size: 12px;
      }

      .play-mode {
        display: flex;
        align-items: center;
        width: 24px;
        cursor: pointer;
        span {
          color: @font-color;
          font-size: 15px;
          &:nth-child(1) {
            font-size: 20px;
          }
        }
      }
    }

    .stop,
    .continue {
      font-size: 38px;
      color: @font-color-green;
      margin: 0 5px;
    }
    .pre,
    .next {
      font-size: 30px;
      color: @font-color;
    }
    //声音设置
    .volume {
      margin-left: 10px;
      color: @font-color;
      font-size: 18px;
      &:last-child {
        color: red;
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 50px;
    span {
      font-size: 12px;
      color: @font-color-gray;
      &:last-child {
        font-size: 12px;
        color: @font-color-green;
      }
    }
    .iconfont {
      font-size: 18px;
      color: @font-color-green;
      margin: 0 2px 0 10px;
    }
  }
}
.iconfont {
  cursor: pointer;
}
</style>

<style lang="less">
@font-color: v-bind(color);
@shadow: v-bind(boxShadow);
@background: v-bind(bg);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;
.volume-setting-container {
  display: flex;
  flex-direction: column;
  width: 36px;
  align-items: center;
  .volume-setting {
    .el-slider__button {
      height: 12px;
      width: 12px;
      margin-left: -2px;
      border: none;
      background-color: @font-color-green;
    }
    .el-slider__bar {
      width: 4px !important;
      background-color: @font-color-green;
    }
    .el-slider__runway {
      width: 4px !important;
      background-color: rgb(217, 217, 217);
    }
  }
  span {
    font-size: 13px;
    color: @font-color;
    margin-top: 10px;
  }
  .el-divider {
    width: 60px;
    margin: 10px 0 0 0;
  }
  .iconfont {
    font-size: 18px;
    &:last-child {
      color: red;
    }
  }
}
.music-process {
  .el-slider__runway:hover .el-slider__button {
    display: inline-block;
  }
}
</style>
